<template>
    <div class="dooya-container" style="min-width: 1100px;overflow:scroll;">

        <Card>
           
            <Form ref="formModalDataRole" :model="modalDataRole" :rules="formModalRule" :label-width="100" >

                <!-- 操作 -->
                <div style="height:40px;margin-bottom: 0px; display:flex;justify-content:end; ">
                <FormItem>

                    <Button style="height:30px;" type="primary" icon="md-checkmark"  @click="handleSubmit('formModalDataRole')">确认</Button>

                    <Button  to="/inneruser/inneruserlist"  @click="handleto()"  style="margin-left: 10px;height:30px;" type="success" icon="ios-undo">返回</Button>
                </FormItem>
                </div>

                <hr>
                <br/>
                
                <FormItem label="用户名" prop="username">
                    <Input type="text" v-model.trim="modalDataRole.username"></Input>
                </FormItem>

                <!-- 对应数据库里面的path字段 -->
                <FormItem  v-if="!modalDataRole.id"  label="密码" prop="password">
                    <Input type="password" v-model.trim="modalDataRole.password"></Input>
                </FormItem>

                <!-- 对应数据库里面的name字段 -->
                <FormItem label="真实姓名：" prop="real_name">
                    <Input type="text" v-model.trim="modalDataRole.real_name"></Input>
                </FormItem>

                <FormItem label="移动电话" prop="telphone">
                    <Input type="text" v-model.trim="modalDataRole.telphone"     placeholder="请输入正确的电话号码"></Input>
                </FormItem>

                <FormItem label="电子邮箱" prop="email">
                    <Input type="text" v-model.trim="modalDataRole.email"     placeholder="请输入正确的电话号码"></Input>
                </FormItem>
                <FormItem label="性别" prop="sex">
                    <RadioGroup v-model="modalDataRole.sex">
                         <Radio :label=1>
                            <span>男</span>
                         </Radio>
                         <Radio :label=2>
                            <span>女</span>
                         </Radio>
                         <Radio :label=3>
                            <span>未知</span>
                         </Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="用户组">
                        <CheckboxGroup v-model="modalDataRole.group">
                
                        <Checkbox v-for="(item, index) in groupData"  :label="item.id"  :key="index" > <span>{{ item.role_name }}</span></Checkbox>

                        </CheckboxGroup>
                </FormItem>

            </Form>

    
        </Card>


    </div>
</template>

<script>
import {
    resultCallback // 根据请求的status执行回调函数
} from "@/libs/dataHanding";
// api
import {
    editUser,
    addUser,
    getGroupList // 获取角色列表
} from "@/api/data";

export default {
    data() {
        return {
            modalDataRole: {
                username: "",
                real_name: "",
                password: "",
                telphone: "",
                email: "",
                sex: 1,
                group: []
            },
            modalDataRoleType: "insert", // 类型：insert/edit
            formModalRule: {
                // 对应数据库里面的title
                username: [
                    {
                        required: true,
                        message: "请输入用户名名称",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 30,
                        message: "用户名名称过长",
                        trigger: "change"
                    }
                ],
                //对应数据库里面的name
                real_name: [
                    {
                        required: true,
                        message: "请输入真实姓名",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 20,
                        message: "真实姓名过长",
                        trigger: "change"
                    }
                ],
                //对应数据库里面的name
                password: [
                    {
                        required: true,
                        message: "请输入6-12位密码",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 12,
                        message: "字符过长",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        min: 6,
                        message: "字符过短",
                        trigger: "change"
                    }
                ],
                // 电话本：
                telphone: [
                    {
                        required: true,
                        message: "请输入移动电话",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 40,
                        message: "移动电话名称过长",
                        trigger: "change"
                    }
                ],
                email: [
                    {
                        required: true,
                        message: "请输入邮箱",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 40,
                        message: "邮箱名称过长",
                        trigger: "change"
                    }
                ]
                //对应数据库里面的level
                // sex: [
                //     {
                //         required: true,
                //         message: "请选择性别",
                //         trigger: "change",
                //         type: "number",
                //         min: 1
                //     }
                // ]
            }, // form规则
            groupData: []
        };
    },

    async created() {
        this.groupData = (await getGroupList()).data.data || [];
        console.log("this.groupData:", this.groupData);

        console.log("this.$route.params:", this.$route.params);

        this.modalDataRole = this.$route.params;

        //this.modalDataRole.group = [3, 4];
        console.log("this.modalDataRole", this.modalDataRole);

        if (this.$route.params.id) {
            if (this.$route.params.role_ids) {
                this.modalDataRole.group = this.$route.params.role_ids
                    .split(" ")
                    .map(Number);
            } else {
                this.modalDataRole.group = [];
            }

            //this.modalDataRole.group = ["3"];

            console.log("this.modalDataRole", this.modalDataRole);
            this.modalDataRoleType = "edit";
        }
    },
    mounted() {},
    methods: {
        //返回功能关闭页签
        handleto() {
            //返回的时候关闭当前标签页
            this.$store.state.app.tagNavList = this.$store.state.app.tagNavList.filter(
                item => {
                    return item.name != "inneruseredit";
                }
            );
        },

        // 提交表单 - 角色
        handleSubmit() {
            console.log("------");
            this.$refs.formModalDataRole.validate(async valid => {
                if (valid) {
                    this.buttonLoading = true;
                    switch (this.modalDataRoleType) {
                        case "insert":
                            let paramData = this.modalDataRole;
                            if (paramData.group) {
                                paramData.group_ids = paramData.group.join(",");
                            } else {
                                paramData.group_ids = "";
                            }
                            console.log("----paramData--", paramData);

                            let res_add = await addUser(paramData);

                            if (res_add.data.code != 0) {
                                //axios.js 已经截取了错误信息，这里不需要提示了。
                            } else {
                                resultCallback(200, "添加成功！", () => {
                                    this.$router.push({
                                        name: "inneruserlist"
                                    });
                                    this.handleto();
                                });
                            }

                            console.log("---res_add--:", res_add);
                            break;

                        case "edit":
                            let paramEditData = this.modalDataRole;
                            if (paramEditData.group) {
                                paramEditData.group_ids = paramEditData.group.join(
                                    ","
                                );
                            } else {
                                paramEditData.group_ids = "";
                            }
                            console.log("----paramEditData--", paramEditData);

                            let res = await editUser(paramEditData);

                            if (res.data.code != 0) {
                                //axios.js 已经截取了错误信息，这里不需要提示了。
                            } else {
                                resultCallback(200, "修改成功！", () => {
                                    this.$router.push({
                                        name: "inneruserlist"
                                    });
                                    this.handleto();
                                });
                            }

                            console.log("---res--:", res);
                            break;
                    }
                }
            });
        },

        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
